define(
	[
		'require',
		'echarts',
		'echarts/chart/line',
		'zrender/tool/util',
		'apm/ui/business_chart_base'
	],
	function (require) {
		"use strict";

		var echarts = require('echarts');
		var zrUtil = require('zrender/tool/util');

		var forEach = Ember.EnumerableUtils.forEach;

		var baseObject = 
		{	
			type: 'line',
 			smooth:true,
 			symbol: 'circle',
			symbolSize: 5,
			showAllSymbol: true,
			itemStyle: {

				normal: {
					borderColor: "#fff",
					borderWidth:2,
					color: '#81f26f',
					label: {
						show: false,
						position: 'top',
						formatter: '{c}'
					},
					lineStyle:{width:1},
					areaStyle: {type: 'default',
						color: "rgba(0,221,255,0.8)",
						borderColor: "#fff",
						
					},

				},
				// emphasis: {
				// 	borderColor: "#fff",
				// 	borderWidth:3,
				// }
			},
			data:[]
		};

		var Component = require("apm/ui/business_chart_base").extend({
			_getDefaultOption: function(){
				return {
					 title : {
				       
				        textStyle: {
				        	color:"#fff",
				        	fontSize: 12,
				        },
				         x:"center"
				    },
					tooltip: {
						 trigger: 'axis',
						 axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						 	type: 'line',
				            lineStyle: {
						        color: 'rgba(82,231,255,1)',
						        width: 2,
						        type: 'solid'
						    }
				         }
					},
					grid: {
						x: 90,
						y: 40,
						x2: 40,
						y2: 30,
						borderWidth: 1,
						borderColor:"#215b92",
					},
					xAxis: [
						{	
							boundaryGap : false,
							type: 'value',
	
							splitLine : {//分割线
								show : true,
								lineStyle: {
									color:"#215b92"
								}
							},
							axisLine : {
								show:false
							},
							axisTick: {
								show: false,
							},
							axisLabel : {
								show : true,
								rotate : 0,
								margin : 10,
								textStyle: {
									color: "#6ac5fe"
								}
							}
						}
					],
					yAxis: [
						{	
							type: 'value',
							name: "交易量",
							splitLine : {//分割线
								show : true,
								lineStyle: {
									color:"#215b92"
								}
							},
							axisLine : {
								lineStyle:{
									color:"#fff",
									width:0
								}
							},
							axisTick: {
								show: false,
							},
							splitNumber:5,
							axisLabel : {
								show : true,
								margin : 10,
								textStyle: {
									color: "#6ac5fe"
								}
							}
						},
						{	
							type: 'value',
							name: "成功率%",
							splitLine : {//分割线
								show : true,
								lineStyle: {
									color:"#215b92",
								}
							},
							axisLine : {
								lineStyle:{
									color:"#fff",
									width:0
								}
							},
							axisTick: {
								show: false,
							},
							splitNumber:5,
							axisLabel : {
								show : true,
								interval : 0,
								rotate : 0,
								margin : 10,
								textStyle: {
									color: "#6ac5fe"
								}
							}
						}
					],
					series: [
						
					]					
				};
			},

			_translateOption: function(option){
				if(this.get("pos") === "left"){
					this._translateYAxis(option);
				}else{
					this._translateXAxis(option);
				}
				
				this._translateSeries(option);
				// this._translateOther(option);
			},

			_translateXAxis: function(option){
				var view = this;
				var data = this.get("newDate")||[];

				var xAxisData = option.xAxis[0].data = [];

				option.xAxis[0].type = "category";
				option.yAxis[0].type = "value";

				forEach(data, function(performance){
					xAxisData.push(view._translateXAxisDataItem(performance));
				});

				if(xAxisData.length == 0){
					xAxisData.push("-");
				}
			},

			_translateYAxis: function(option){
				var view = this;
				var data = this.get("newDate")||[];

				var yAxisData = option.yAxis[0].data = [];

				option.yAxis[0].type = "category";
				option.xAxis[0].type = "value";

				forEach(data, function(performance){
					yAxisData.push(view._translateXAxisDataItem(performance));
				});

				if(yAxisData.length == 0){
					yAxisData.push("-");
				}
			},

			/**
			 * 将原始值转换为柱形图的xAxis配置
			 */
			_translateXAxisDataItem: function(performance){
				var name = this.get("name");
				return performance[name];
			},

			//通过字段给tiptool赋值一个总名次
			tiptoolName: function(node,newObject){
					var data = this.get("newDate")||[],
						view = this;

					if(node == "business/success/count"){
						newObject["name"] = "成功交易量";
					}else if(node == "business/success/rate"){
						newObject["name"] = "成功率%";
					}

					forEach(data, function(performance){
						 newObject["data"].push(view._translateSeriesDataItem(performance[node]));
					});
					return newObject;
			},

			//填充Series里的数据（注意Series[0]这样赋值是一个坑，push进入才行）
			_translateSeries: function(option){

				var name = this.get("name");
				
				var view = this;
			

				if(view.get("dataKey").length == 1){
					option.series = [];
					option.title.text = "可用率排行";



					forEach(Ember.A(view.get("dataKey")),function(node,index){
						var newObject = Ember.copy(baseObject, true);

						var newObject = view.tiptoolName(node,newObject);
						option.series.push(newObject);
					});
	
				}else if(view.get("dataKey").length == 2){
					option.series = [];
					option.title.text = "交易量和成功率对比";

					forEach(Ember.A(view.get("dataKey")),function(node,index){
						var newObject = Ember.copy(baseObject, true);

						newObject["yAxisIndex"] = index;
						if(index%2 == 0){
							
							
							newObject["itemStyle"]["normal"]["color"] = "#04da94";
							newObject["itemStyle"]["normal"]["areaStyle"]["color"] = "rgba(4,218,148,.3)";
						}else{
							newObject["itemStyle"]["normal"]["color"] = "#00ddff";
							newObject["itemStyle"]["normal"]["areaStyle"]["color"] = "rgba(0,221,255,.36)";
						}
						
						var newObject = view.tiptoolName(node,newObject);
						
						option.series.push(newObject);
					});
					
				}
			
			},

			// _translateOther: function(option){
			// 	option.yAxis[0].name = this.get("yName")||"";
			// 	if(this.get("yMax")) {
			// 		option.yAxis[0].max = this.get("yMax");
			// 	}

			// 	if(!this.hasData){
			// 		option.yAxis[0].max = 100;
			// 	}

			// 	if(this.dataKey && this.dataKey == "system/score/apdex"){
			// 		option.yAxis[0].splitNumber = 1;
			// 	}
			// },


			

			_translateSeriesDataItem: function(orgiVal){
				var value = Ember.isNone(orgiVal) ? "-" : orgiVal;

				
				if(value !== "-"){
					this.hasData = true;
				}
			

				return  value;
			},

			// _tooltipFormatter: function(type){
			// 	return function(params, ticket, callback){
			// 		params = Ember.A(params||[]);
			// 		var formatter = APM.util.indicatorFormatter(type);
			// 		var tooltip = params[1] + '：' + formatter(params[2]);
			// 		return tooltip;
			// 	}
			// },

			_resizeChart: function(){
				// this.updateAxisLabelInterval();
				this._super();
			}
		});

		APM.ui.BrowserLine = Component;

		return Component;
	}
);